<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      open: false,
      fav: false
    }
  }
}
</script>

<template>
  <Teleport to="body">
    <div v-if="open" class="modal">
      <div class="modalcard">
        <div class="head">
          <button class="closebtn" @click="open = false">X</button>
          <div
            class="headicon fav_icon fav_icon_full"
            v-if="`${type}` == 'prods' && !`${fav}`"
          ></div>
          <div class="headicon fav_icon" v-if="`${type}` == 'prods' && `${fav}`"></div>
        </div>
        <img class="modal_product_photo" :src="`${product.photo}`" />
        <div class="name">
          <p id="name">{{ product.name }}</p>
          <p id="cost" v-if="`${type}` == 'prods'">{{ product.cost }}</p>
        </div>
      </div>
    </div>
  </Teleport>
  <div class="productcard" @click="open = true">
    <div class="fav_icon fav_icon_full" v-if="`${type}` == 'prods' && !`${fav}`"></div>
    <div class="fav_icon" v-if="`${type}` == 'prods' && `${fav}`"></div>
    <img class="product_photo" :src="`${product.photo}`" />
    <div class="name">
      <p id="name">{{ product.name }}</p>
      <p id="cost" v-if="`${type}` == 'prods'">{{ product.cost }}</p>
    </div>
  </div>
</template>

<style scoped>
.closebtn {
  color: #000;
  font-family: Montserrat;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border: none;
  background: none;
  transition: 0.5s;
  border-radius: 10px;
  align-self: flex-end;
}

.closebtn:hover {
  background-color: #7777776e;
}

.product_photo {
  height: 250px;
}

.modal_product_photo {
  height: 80%;
}

.head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  flex-direction: row-reverse;
}

.fav_icon {
  width: 20px;
  height: 20px;
  align-self: flex-start;
  background-image: url('../../public/img/fav.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.fav_icon_full {
  background-image: url('../../public/img/fav_full.svg');
}

.headicon {
  align-self: center;
  width: 25px;
  height: 25px;
}

.fav_icon:hover {
  background-image: url('../../public/img/fav_full.svg');
}

#cost {
  color: #ffa542;
  font-family: Montserrat;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#name {
  color: #1c1c27;
  font-family: Montserrat;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.productcard {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 310px;
  max-width: 80%;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  flex-basis: 30%;
  margin-bottom: 30px;
  text-align: center;
  transition: 0.5s;
}

.modalcard {
  width: 60vh;
  height: 70vh;
  padding: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
  text-align: center;
  transition: 0.5s;
}

.productcard:hover {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
}

.name {
  width: 140%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.modal {
  position: fixed;
  z-index: 999;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsla(0, 0%, 0%, 0.42);
}
</style>
